<template>
	<s-layout title="鲸禧短剧" :bgStyle="{
		color:'#15141F'
	}">
		<customSwiper :images="state.recommend_list" @onItemClick="onItemClick"></customSwiper>
		<su-sticky>
			<su-tabs :borderNode="true" keyName="cate_name" :list="state.tabMaps" :backgroundColor="state.background"
				@change="onTabsChange" :current="state.currentTab" :activeStyle="state.activeStyle"
				:inactiveStyle="state.inactiveStyle" lineColor="#00BBFF"></su-tabs>
		</su-sticky>
		<view class="ss-safe-bottom">
			<view class="list ss-flex flex-wrap justify-between align-center ss-p-x-16 ss-p-t-30">
				<view class="item" v-for="(item,index) in state.list" :key="index" @click="jump(item)">
					<view class="item-image-box">
						<image class="item-image" :src="item.img" mode="aspectFill"></image>
						<view class="item-info ss-flex justify-between align-center ss-p-x-15">
							<view class="ss-flex align-center">
								<image class="item-info-left-icon"
									src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/playlet/index-collection.png">
								</image>
								<view>{{item.sub_title}}</view>
							</view>
							<view class="ss-flex align-center">
								<image class="item-info-left-icon"
									src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/playlet/index-play.png">
								</image>
								<view>{{item.play_num < 0 ? 0 : item.play_num}}次</view>
							</view>
						</view>
					</view>
					<view class="item-title ss-line-2">{{item.title}}</view>
				</view>
			</view>
			<s-empty v-if="state.total === 0" paddingTop="20"
				icon="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/soldout-empty.png" text="暂未上架此类型短剧~">
			</s-empty>
			<uni-load-more v-if="state.total > 0" :status="state.loadStatus" :content-text="{
						        contentdown: '上拉加载更多',
						      }" @tap="loadmore" />
		</view>
	</s-layout>
</template>


<script setup>
	import {
		watch,
		reactive,
		ref,
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import customSwiper from './components/custom-swiper.vue'

	const state = reactive({
		tabMaps: [],
		currentTab: 0,
		background: '#15141F',
		activeStyle: {
			'font-size': '32rpx',
			'color': '#00BBFF'
		},
		inactiveStyle: {
			'font-size': '32rpx',
			'color': '#6E6E6E'
		},
		page: 1,
		total: 1,
		loadStatus: 'loading',
		list: [],
		recommend_list: []
	})

	onLoad(() => {
		getData()
		getType()
	})

	onReachBottom(() => {
		loadmore()
	})

	const loadmore = () => {
		if (state.loadStatus !== 'noMore') {
			state.page++
			getList()
		}
	}

	const onItemClick = (e) => {
		sheep.$router.go('/pages/playlet/details', {
			id: e.id,
		})
	}

	const jump = (item) => {
		uni.navigateTo({
			url: `/pages/playlet/details?id=${item.id}`,
			events: {
				// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				changeIndexNum: function(data) {
					console.log(data)
					let index = state.list.findIndex(item => item.id === Number(data.id))
					
					if (index !== -1) {
						state.list[index].play_num += data.num
					}
				},
			}
		})
	}

	const onTabsChange = (e) => {
		if (e.index === state.currentTab) {
			return
		}
		state.currentTab = e.index
		state.page = 1
		state.total = 1
		state.list = []
		getList()
	}

	const getType = async () => {
		const {
			error,
			data
		} = await sheep.$api.playlet.getType()

		if (error === 0) {
			state.tabMaps.unshift({
				cate_id: '',
				cate_name: "推荐"
			})
			state.tabMaps = state.tabMaps.concat(...data)
			getList()
		}
	}

	const getList = async () => {
		state.loadStatus = 'loading'
		const {
			error,
			data
		} = await sheep.$api.playlet.playletList({
			page: state.page,
			cate_id: state.tabMaps[state.currentTab].cate_id,
			list_rows: 10
		})

		if (error === 0) {
			state.list = state.list.concat(data.data)
			state.total = data.total
			if (data.current_page < data.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}

	const getData = async () => {
		const {
			error,
			data
		} = await sheep.$api.playlet.recommend()

		if (error === 0) {
			state.recommend_list = data
		}
	}
</script>


<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.item {
		width: 350rpx;
		margin-bottom: 10rpx;

		.item-image-box {
			position: relative;
			width: 100%;
			height: 622rpx;

			.item-image {
				width: 100%;
				height: 622rpx;
				border-radius: 10rpx;
			}

			.item-info {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 64rpx;
				background: rgba(29, 29, 29, 0.77);
				border-radius: 0 0 10rpx 10rpx;
				color: #fff;

				.item-info-left-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}



		.item-title {
			width: 100%;
			min-height: 88rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top: 15rpx;
		}
	}
</style>